<template>
    <div class="trend-analysis">
        <pageTitle :title="'員工趨勢分析'" />

        <!-- 第一行：員工人數趨勢 -->
        <div class="trend-container">
            <div class="chart-header">
                <h3>員工人數趨勢</h3>
                <el-select v-model="selectedYear" placeholder="選擇年份" @change="updateTrendChart" style="width: 200px;">
                    <el-option v-for="year in years" :key="year" :label="year" :value="year">
                    </el-option>
                </el-select>
            </div>
            <div ref="trendChart" class="chart"></div>
        </div>

        <!-- 第二行：入職離職人數 -->
        <div class="hire-leave-container">
            <div class="chart-header">
                <h3>入職離職人數 ({{ selectedYear }})</h3>
            </div>
            <div ref="hireLeaveChart" class="chart"></div>
        </div>

        <!-- 第三行：三個圖表 -->
        <div class="three-charts">
            <!-- 離職原因 -->
            <div class="chart-card">
                <div class="chart-header">
                    <h3>離職原因</h3>
                </div>
                <div ref="turnoverReasonChart" class="chart"></div>
            </div>

            <!-- 調動類型 -->
            <div class="chart-card">
                <div class="chart-header">
                    <h3>調動類型</h3>
                </div>
                <div ref="transferTypeChart" class="chart"></div>
            </div>

            <!-- 各職位類別員工人數 -->
            <div class="chart-card wide">
                <div class="chart-header">
                    <h3>各職位類別員工人數</h3>
                </div>
                <div ref="positionChart" class="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 年份選擇
const years = ref(['2023', '2022', '2021', '2020'])
const selectedYear = ref('2023')

// 圖表引用
const trendChart = ref(null)
const hireLeaveChart = ref(null)
const turnoverReasonChart = ref(null)
const transferTypeChart = ref(null)
const positionChart = ref(null)

onMounted(() => {
    // 初始化所有圖表
    initTrendChart()
    initHireLeaveChart()
    initTurnoverReasonChart()
    initTransferTypeChart()
    initPositionChart()

    // 響應式調整
    window.addEventListener('resize', handleResize)
})

// 處理窗口大小變化
const handleResize = () => {
    const charts = [
        trendChart.value,
        hireLeaveChart.value,
        turnoverReasonChart.value,
        transferTypeChart.value,
        positionChart.value
    ].filter(chart => chart && chart.resize)

    charts.forEach(chart => chart.resize())
}

// 更新趨勢圖表
const updateTrendChart = () => {
    const chart = echarts.getInstanceByDom(trendChart.value)
    if (chart) {
        const option = getTrendChartOption()
        chart.setOption(option)
    }
}

// 趨勢圖表選項
const getTrendChartOption = () => {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['在職員工', '入職員工', '離職員工'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            name: '人數'
        },
        series: [
            {
                name: '在職員工',
                type: 'line',
                stack: 'Total',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(58, 160, 255, 0.8)' },
                        { offset: 1, color: 'rgba(58, 160, 255, 0.1)' }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [1200, 1220, 1250, 1280, 1300, 1320, 1350, 1380, 1400, 1420, 1450, 1480]
            },
            {
                name: '入職員工',
                type: 'line',
                stack: 'Total',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(61, 212, 167, 0.8)' },
                        { offset: 1, color: 'rgba(61, 212, 167, 0.1)' }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160]
            },
            {
                name: '離職員工',
                type: 'line',
                stack: 'Total',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(250, 116, 107, 0.8)' },
                        { offset: 1, color: 'rgba(250, 116, 107, 0.1)' }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [30, 25, 40, 35, 20, 45, 30, 25, 40, 35, 20, 45]
            }
        ]
    }
}

// 初始化趨勢圖表
const initTrendChart = () => {
    const chart = echarts.init(trendChart.value)
    chart.setOption(getTrendChartOption())
}

// 初始化入職離職圖表
const initHireLeaveChart = () => {
    const chart = echarts.init(hireLeaveChart.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['入職人數', '離職人數'],
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
            name: '人數'
        },
        series: [
            {
                name: '入職人數',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                data: [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160],
                itemStyle: {
                    color: '#3dd4a7'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '離職人數',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: [30, 25, 40, 35, 20, 45, 30, 25, 40, 35, 20, 45],
                itemStyle: {
                    color: '#fa746b'
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    }
    chart.setOption(option)
}

// 初始化離職原因圖表
const initTurnoverReasonChart = () => {
    const chart = echarts.init(turnoverReasonChart.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            orient: 'vertical'
        },
        series: [
            {
                name: '離職原因',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '個人發展' },
                    { value: 735, name: '薪資待遇' },
                    { value: 580, name: '工作環境' },
                    { value: 484, name: '家庭原因' },
                    { value: 300, name: '其他' }
                ]
            }
        ]
    }
    chart.setOption(option)
}

// 初始化調動類型圖表
const initTransferTypeChart = () => {
    const chart = echarts.init(transferTypeChart.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            orient: 'vertical'
        },
        series: [
            {
                name: '調動類型',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '18',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '晉升' },
                    { value: 735, name: '平調' },
                    { value: 580, name: '降職' },
                    { value: 484, name: '部門調動' },
                    { value: 300, name: '其他' }
                ]
            }
        ]
    }
    chart.setOption(option)
}

// 初始化職位類別圖表
const initPositionChart = () => {
    const chart = echarts.init(positionChart.value)
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['管理層', '技術崗', '銷售崗', '行政崗', '財務崗', '客服崗', '生產崗'],
            axisLabel: {
                interval: 0,
                rotate: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '人數'
        },
        series: [{
            name: '員工人數',
            type: 'bar',
            data: [50, 320, 280, 180, 120, 80, 150],
            itemStyle: {
                color: '#4092fc'
            },
            barWidth: '60%',
            label: {
                show: true,
                position: 'top'
            }
        }]
    }
    chart.setOption(option)
}
</script>

<style scoped>
.trend-analysis {
    padding: 20px;
    background-color: #f5f7fa;
}

/* 圖表容器樣式 */
.trend-container,
.hire-leave-container {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.chart {
    width: 100%;
    height: 400px;
}

/* 三個圖表佈局 */
.three-charts {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 16px;
}

.chart-card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 400px;
}
</style>